//指标分类管理
/* eslint-disable */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Table, Divider, Tag, InputNumber, Input, Select, Button, message, Icon } from 'antd';
import { DndProvider, DragSource, DropTarget } from 'react-dnd';
import styles from './BackClassfiy.less';
import update from 'immutability-helper';
import Filtrate from '../../components/common/Filtrate';
import MyPagination from '../../components/common/MyPagination';
import Container from '../../components/common/Container';
import MyTable from '../../components/common/MyTable';
import request from '../../utils//request';
import PublicService from "../../services/PublicService";
import AddModal from './sub/AddModal';
import config from '../../config';
const { Search } = Input;
const { Option } = Select;
let dragingIndex = -1;
const IconFont = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1589202_7c747i8xu6h.js',
});

class BackClassfiy extends Component {
    state = {
        loading: false,
        equipmentId: '',
        options: [],//指标下拉框
        dataSource: [],
        params: {},
        pageSize: 10,
        pageIndex: 1,
        total: 0,
        kpiName: '',
        kpiCode: '',
        companyId: '402880e5703d658801703d68a70e0000',
        addModal: false,
        modalBtnLoading: false,
        modalTitle: '编辑',
        footerShow: true,
        moddleArrTable:[],
        AddOptions:[]
    };

    componentDidMount() {
        this.findListIndicatorClassify('402880e5703d658801703d68a70e0000')
        this.onSubmit(1,10)
    }

    onSubmit = (page,rows) => {//查询

        let params = {
            equipmentId: this.state.equipmentId,
            page,
            rows,
            companyId: this.state.companyId
        }
        this.setState({
            params
        })
        request({
            url: '/sx-client/sx/kpiclassify/getPageList',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    dataSource: data.ret.items,
                    total: data.ret.rowCount,
                })
            } else {
                message.warning(`${data.err}`)
            }
        })

    }
    findListIndicatorClassify = (pid) => {//查询指标下拉
        //localhost:8085/sx-client/sx/equipment/getListByCompanyId?companyId=402880e5703d658801703d68a70e0000


        request({
            url: `/sx-client/sx/equipment/getListByCompanyId?companyId=${pid}`,
            method: 'GET',
        }).then(data => {
            console.log(data)

            if (data.rc === 0) {
                data.ret.forEach(item => {
                    item.text = item.name
                    item.value = item.companyId
                });
                this.setState({
                    options: data.ret,
                    companyId: pid
                })

            } else {
                message.warning(`${data.err}`)
            }

        })
    }

    // 分页
    onChangePage = (page, size) => {//分页
        this.setTimeAndSearch(this.state.params, page, size);
        this.setState({
            pageSize: size,
            pageIndex: page,
        })
    };

    onChangePage1 = (page, size) => {//改变最大条数
        this.setTimeAndSearch(this.state.params, 1, size);
        this.setState({
            pageSize: size,
            pageIndex: 1
        })
    };

    setTimeAndSearch = (val, pageIndex, row) => {
        this.setState({
            spinning: true,
            pageIndex,
            pageSize: row
        })

        let params = {
            equipmentId: this.state.equipmentId,
            page: pageIndex,
            rows: row,
            companyId: this.state.companyId
        }

        request({
            url: '/sx-client/sx/kpiclassify/getPageList',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    dataSource: data.ret.items,
                    total: data.ret.rowCount,
                    params
                })
            } else {
                message.warning(`${data.err}`)
            }
        })

    };


    handleChange = (v, val) => {//下拉改变
        console.log(v, val)
        this.setState({
            equipmentId: v
        })
    }
    //查询指标名称下对应指标
    findByKpiClassifyId = (record) => {
        request({
            url: `/sx-client/sx/kpiclassify/findByKpiClassifyId?kpiClassifyId=${record.id}`,
            method: 'GET',
        }).then(data => {
            if (data.rc === 0) {

                console.log(data,175)
                this.setState({
                    addModal: true,
                    footerShow: false,
                    moddleArr: [
                        {
                            type: 'input',
                            label: "指标分类名称",
                            paramName: "equipmentName",
                            key: "equipmentName",
                            initialValue: record.equipmentName,
                            disabled: true,
                            rules: [{ ...config.reg.required }],
                            style:{width:170}
                        },
                        {
                            type: 'input',
                            label: "指标分类单位",
                            paramName: "unit",
                            key: "unit",
                            initialValue: record.unit,
                            disabled: true,
                            rules: [{ ...config.reg.required }],
                            style:{width:170}
                        }
                    ],
                    moddleArrTable:data.ret
                })
            }

        })
    }


    onEdit = (text, record, index) => {//编辑
        console.log(text, record, index)
        //localhost:8085/sx-client/sx/kpiclassify/findByKpiClassifyId?kpiClassifyId=402880e5703df51d01703dfac83f0001
        // this.findByKpiClassifyId(record)


    }
    onCheck = (text, record, index) => {//查看
        console.log(text, record, index)
        this.findByKpiClassifyId(record)

        this.setState({
            modalTitle:'查看'
        })
    }


    onSave = (text, record, index) => {//保存
        console.log(text, record, index)
        this.state.dataSource[index].flag = false
        this.setState({
            dataSource: this.state.dataSource
        })
    }


    onInputNumberChange = (text, record, index, v, val) => {//数字输入
        // console.log(text, record, index,v,val)
        this.state.dataSource[index][v] = val
        this.setState({
            dataSource: this.state.dataSource
        })
    }

    onInputChange = (v, val) => {
        this.setState({
            [v]: val.target.value
        })
    }

    // 打开模态框
    onOpenModal = (type) => {
        let t = this;
        console.log("type:", type);
        t.setState({
            [type]: true,
        })
    };

    // modal保存
    ModalOk = (val,moddleArrTable) => {
        // console.log(val,moddleArrTable)
        //localhost:8085/sx-client/sx/kpiclassify/insertKpiClassify
        let kpiClassifyKpis = []
        moddleArrTable.forEach((item,index) => {
            if(item.kpiName){
                kpiClassifyKpis.push({kpiId:item.kpiName,sn:index+1})
            }
           
        })

        let params = {
            name:val.name,
            unit:val.unit,
            equipmentId:this.state.equipmentId,
            kpiClassifyKpis
        }


        request({
            url: '/sx-client/sx/kpiclassify/insertKpiClassify',
            method: 'POST',
            data: params
        }).then(data => {
            if(data.rc === 0) {
                message.success('新增成功')
                this.onSubmit(1,10)
                this.setState({
                    addModal:false
                })
            }else{
                message.warning(data.err)
            }
        })

    }

    // 取消保存
    ModalCancel = (type) => {
        let t = this;
        t.setState({
            [type]: false,
            modalBtnLoading: false
        })
    };

    addBtn = () => {
        console.log('新增')
        //localhost:8085/sx-client/sx/kpi/getKpiList
        if(!this.state.equipmentId){
            message.warning('请选择指标类型后新增!')
            return
        }
        let params = {
            equipmentId: this.state.equipmentId,
            companyId: this.state.companyId
        }
        request({
            url: '/sx-client/sx/kpi/getKpiList',
            method: 'POST',
            data: params
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                this.setState({
                    AddOptions:data.ret,
                    addModal: true,
                    footerShow: true,
                    modalTitle:'新增',
                    moddleArr: [
                        {
                            type: 'input',
                            label: "指标分类名称 :",
                            paramName: "name",
                            key: "name",
                            rules: [{ ...config.reg.required }],
                            style:{width:170}
                        },
                        {
                            type: 'input',
                            label: "指标分类单位 :",
                            paramName: "unit",
                            key: "unit",
                            rules: [{ ...config.reg.required }],
                            style:{width:170}
                        }
                    ],
                    moddleArrTable:[
                        {
                            sn:'#1锅炉',
                        },
                        {
                            sn:'#2锅炉',
                        },
                        {
                            sn:'#3锅炉',
                        },
                        {
                            sn:'#4锅炉',
                        }
                    ]
                })
            }
        })

  
    }

    render() {

        const { footerShow, options, dataSource, pageSize, pageIndex, total, addModal, modalTitle, modalBtnLoading } = this.state

        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '75vh';
        let tableHeight = 330;
        if (width > 1367) {
            tableHeight = 350;
            containerHeight = '80vh';
        }
        const columns = [
            {
                title: '序号',
                dataIndex: 'num',
                key: 'num',
                width: 50,
                align: 'center',
            },
            {
                title: '指标分类名称',
                dataIndex: 'equipmentName',
                key: 'equipmentName',
                width: 150,
                align: 'center',
            },
            {
                title: '指标单位',
                dataIndex: 'unit',
                key: 'unit',
                width: 80,
                align: 'center',
            },
            {
                title: '测试编码',
                dataIndex: 'kpiCode',
                key: 'kpiCode',
                width: 120,
                align: 'center',
            },
            {
                title: '操作',
                dataIndex: 'address',
                key: 'address',
                width: 100,
                align: 'center',
                render: (text, record, index) => <span>

                    {/* <span onClick={this.onEdit.bind(this, text, record, index)} style={{ fontSize: 14, cursor: 'pointer' }}>编辑 <IconFont type="iconbianpinghuatubiaosheji-" /></span>
                    <Divider type="vertical" /> */}
                    <span onClick={this.onCheck.bind(this, text, record, index)} style={{ fontSize: 14, cursor: 'pointer' }}>查看 <IconFont type="iconbianpinghuatubiaosheji-" /></span>

                </span>
            },
        ];


        return (

            <div className={styles.warp}>
                {
                    addModal &&
                    <AddModal
                        // dataTypes={dataTypes}
                        width={800}
                        visible={addModal}
                        title={modalTitle}
                        modalBtnLoading={modalBtnLoading}
                        footerShow={footerShow}
                        onModalSave={this.ModalOk.bind(this)}
                        onCancel={this.ModalCancel.bind(this, 'addModal')}
                        moddleArrTable={this.state.moddleArrTable}
                        moddleArr={this.state.moddleArr}
                        AddOptions={this.state.AddOptions}
                        equipmentId={this.state.equipmentId}

                    />
                }
                <div className={styles.topBox}>
                    <span>项目公司：</span>
                    <Select size='small' defaultValue="402880e5703d658801703d68a70e0000" style={{ width: 170 }} onChange={this.findListIndicatorClassify}>
                        <Option value="402880e5703d658801703d68a70e0000">清能环保</Option>
                        <Option value="402880e5703d658801703d6904da0001">再生能源</Option>
                        <Option value="402880e5703d658801703d6978c40002">维尔利</Option>
                        <Option value="402880e5703d658801703d69c2230003">清运公司</Option>
                    </Select>
                    <span style={{ marginLeft: 10 }}>指标类型：</span>
                    <Select size='small' value={this.state.equipmentId} style={{ width: 170 }} onChange={this.handleChange}>
                    <Option value=''>全部</Option>
                        {
                            options.map((item) => {
                                return (
                                    <Option value={item.id}>{item.name}</Option>
                                )
                            })
                        }
                    </Select>
                    <Button size='small' style={{ marginLeft: 10 }} type="primary" onClick={this.onSubmit.bind(this,1,10)}>查询</Button>
                    <Button size='small' style={{ marginLeft: 10 }} >重置</Button>
                </div>

                <Container
                    style={{ height: containerHeight, position: "relative", overflow: 'auto' }}
                    // header={true}
                    addBtnShow={true}
                    // deleteBtnShow={true}
                    addBtn={this.addBtn}
                >

                    <MyTable
                        columns={columns}
                        scroll={{ y: height - tableHeight }}
                        dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                        pagination={false}
                    />
                    <MyPagination
                        showPage
                        pageSize={pageSize}
                        current={pageIndex}
                        total={total}
                        showSizeChanger
                        showQuickJumper
                        onChange={this.onChangePage.bind(this)}
                        onShowSizeChange={this.onChangePage1.bind(this)}
                    />
                </Container>

            </div>
        )
    }


}

export default connect()(BackClassfiy)